<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Author" content="网页作者" />
    <meta name="Copyright" content="网站版权" />
    <meta name="keywords" content="网站关键字" />
    <meta name="description" content="网站描述" />
    <title>AngularJS集合数据遍历显示</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<style type="text/css">
*{margin:0;padding:0}
a{text-decoration:none;color:#111}
ul,li{list-style:none;}
body{font-size:12px;font-family:"微软雅黑";}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
   <table width="60%" border="1">
       <tr>
           <th>序号</th>
           <th>商品编号</th>
           <th>商品名称</th>
           <th>价格</th>
       </tr>

        <!-- 在一个集合products列表中 循环遍历取每一 个product  循环遍历取每一个product名字可以随便取-->
       <tr ng-repeat="product in products">
            <!-- 可以获取当前循环的序号 -->
           <td>{{$index+1}}</td>
           <td>{{product.id}}</td>
           <td>{{product.name}}</td>
           <td>{{product.price}}</td>
       </tr>
   </table>

 <script type="text/javascript">
    var myapp = angular.module("myapp",[]);
    // 在控制器中定义集合
    myapp.controller("myctrl",["$scope",function($scope){
        $scope.products = [
            {
                id:1001,
                name:"小米手机",
                price:2599
            },
             {
                id:1002,
                name:"苹果",
                price:7999
            },
             {
                id:1003,
                name:"一加6",
                price:3599
            },
        ]
    }]);
 </script>

</body>
</html>